<template>
  <div class="qualiy" >
    <el-table :data="projectInfo" :cell-style="{'text-align':'center'}" :header-cell-style="{background: '#f8f8f9',textAlign: 'center'}">
      <el-table-column width="200" show-overflow-tooltip prop="pName" label="项目名称"></el-table-column>
      <el-table-column show-overflow-tooltip prop="pCode" label="合同编码"></el-table-column>
      <!-- <el-table-column show-overflow-tooltip prop="pJc" label="项目简称"></el-table-column> -->
      <el-table-column show-overflow-tooltip prop="pMoney" label="项目金额(元)"></el-table-column>
      <el-table-column show-overflow-tooltip prop="pAddr" label="项目地址"></el-table-column>
      <el-table-column show-overflow-tooltip prop="pUration" label="项目工期(月)"></el-table-column>
      <el-table-column :formatter="formatDate" show-overflow-tooltip prop="startTime" label="开工时间"></el-table-column>
      <el-table-column :formatter="formatDate" show-overflow-tooltip prop="endTime" label="竣工时间"></el-table-column>
      <el-table-column show-overflow-tooltip prop="tunnelNum" label="隧道数量(座)"></el-table-column>
      <el-table-column show-overflow-tooltip label="项目状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.pStatus == 1" type="warning">施工中</el-tag>
          <el-tag v-if="scope.row.pStatus == 2" type="success">已完成</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column show-overflow-tooltip prop="bz" label="备注"></el-table-column> -->
      <el-table-column label="操作" fixed="right" width="180">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button icon="el-icon-delete" size="mini" type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
      :total="currentPage.total"></el-pagination>
    <!-- 分页 -->

    <ProjectEditor :flag="flag" />
  </div>




</template>

<script>
import api from '../../../api'
import qs from 'qs'
import ProjectEditor from './ProjectEditor.vue'

export default {
  data() {
    return {
      flag: false,
      projectInfo: [],
      options: [{ value: '技术员' }, { value: '项目负责人' }, { value: '超前监测' }, { value: '监理人' }],
      value: '--全部--',
      currentPage: {
        pageNo: 1,
        total: 0
      }
    }
  },
  components: {
    ProjectEditor
  },

  mounted() {
    this.http(1)
    this.$bus.$on('onRefreshProAdmin', (flag) => {
      this.http(1)
    })
  },
  methods: {
    http(page) {
      api
        .proAdminpagefindByAll({ page })
        .then((res) => {
          if (res.data.code == 2001) {
            this.projectInfo = res.data.data.records
            this.currentPage.total = parseInt(res.data.data.total)
          }
        })
    },
    handleEdit(index, row) {
      this.$bus.$emit('onShowEditorProject', row)
    },
    handleDelete(index, row) {
      let data = {
        id: row.id
      }
      this.$confirm('此操作将永久项目信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'del-model',
        type: 'warning'
      })
        .then(() => {
          api
            .proAdmindeleteById(qs.stringify(data))
            .then((res) => {
              if (res.data.code == 2001) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                // 视图重绘
                this.http(1)
              } else {
                this.$message({
                  type: 'fail',
                  message: '删除失败!'
                })
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleCurrentChange(val) {
      this.http(val, this.tid)
    },
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if (data == null) {
        return null
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
    }
  }
}
</script>

<style scoped>
.qualiy{
  padding: 20px;
}
</style>